<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/comm/comm.jsp"%>

<link href="${ctx }/static/css/news.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx }/static/js/comm/base.js"></script>


<div class="content-bottom">
	<div class="row-fluid">
		<div class="span12">
			<!-- BEGIN EXAMPLE TABLE PORTLET-->
			<div class="portlet box light-grey red">
				<div class="portlet-body" id="roleEditDiv" style="display:none">
					<div style="width:300px">
						<form class="form-horizontal" role="form">
							<input type="hidden" name="roleId" id="roleId">
							<div class="control-group">
								<label class="control-label">功能权限：</label>
								<div class="controls">
									<div class="checkbox span10" style="width: 573px;">
										<label> <input name="all" onclick="allClick(this);" type="checkbox">全部功能权限
										</label>
										<c:forEach items="${menus }" var="menu">
											<c:if test="${empty menu.parentId}">
												<div class="checkbox">
													<label><input name="ids" value="${menu.menuId }" type="checkbox">${menu.menuName }</label>
												</div>
												<div style="margin-bottom:6px;" class="checkbox dash-border form-inline">
													<c:forEach items="${menus }" var="son">
														<c:if test="${son.parentId eq menu.menuId}">
															<label><input style="margin-left:10px;" name="ids" value="${son.menuId }" onchange="selectBox(this,'${menu.menuId}')" parentid="${menu.menuId}"
																	type="checkbox">${son.menuName }</label>
														</c:if>
													</c:forEach>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
				<form action="role/list" id="searchForm" class="horizontal-form"></form>
				<div class="portlet-body">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>角色名称</th>
								<th style="width:20%">角色描述</th>
								<th style="width:50%">功能权限</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${results}" var="role">
								<tr>
									<td>${role.roleName}</td>
									<td>${role.roleDescribe}</td>
									<td>${role.menuNames}</td>
									<td class="audit_button"><a href="#add-alart-page" onclick="info('${role.roleId}');" data-toggle="modal" role="button" class="audit_bj">编辑</a></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!-- END EXAMPLE TABLE PORTLET-->
	</div>
</div>
<script>
	function allClick(ele){
		var flag = Boolean($(ele).attr("checked"));
		var checkboxs = $(ele).parent().parent().find("[name='ids']");
        checkboxs.attr("checked", flag);
	}
	function selectBox(ele, id) {
		var flag = $("[parentid='" + id + "']:checked").length != 0;
		$(ele).parents("div:eq(0)").prev().find("input").attr("checked", flag);
	}
	function info(id) {
		var roleEditDiv = $("#roleEditDiv").clone(true);
		roleEditDiv.find("form").attr("id", "roleForm");
		roleEditDiv.find("[name='roleId']").val(id);
		
		$.ajax({
			url : '${ctx }/role/info',
			data : {
				id : id
			},
			success : function(data) {
				if (data.code == 200) {
					for (var i = 0; i < data.roleMenus.length; i++) {
						var menuId = data.roleMenus[i].menu;
						var checkbox = roleEditDiv.find("[name='ids'][value='" + menuId + "']");
						checkbox.attr("checked", true);
					}
					layer.open({
						title : "权限管理",
						type : 1,
						skin : 'layui-layer-rim', //加上边框
						area : ['60%', '80%' ],//宽高
						content : roleEditDiv.html(),
						btn : [ '确定', '取消' ],
						yes : function(index) {
							add();
						},
					});
				}
			}
		});
	}
	function add() {
		if ($("[name='ids']:checked").size() == 0) {
			layer.msg("没有选择数据");
			return;
		}
		// 提交
		$.ajax({
			url : '${ctx }/role/modify',
			data : $("#roleForm").serialize(),
			success : function(data) {
				layer.msg(data.msg);
				if (data.code) {
					layer.closeAll();
					queryResultH();
				}
			}
		});
	}
</script>